﻿<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>表格 - Xui Demo</title>
	<!-- demo -->
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script type="text/javascript" src="../demo_data.js"></script>
	
	<!-- xui -->
	<link rel="stylesheet" type="text/css" href="../../xui.css">
	<script type="text/javascript" src="../../jquery.min.js"></script>
	<script type="text/javascript" src="../../xui.js"></script>
	
	<!-- xtable -->
	<script type="text/javascript">
		$(function(){
			var xtable = $("#goods_xtable").xtable({
				width:'100%',				//宽度默认  100%
				bodyHeight:279,				//滚动条高度 滚动态
				page:1,						//加载页面默认 1
				rows:8,						//每页行数默认 20
				paging:'#goods_xpaging',	//分页id
				xdata:$xdata,				//静态数据
				//url:"$xdata"				//后台返回数据格式参考 $xdata
				//deleteUrl:'',			//后台处理删除操作
				format:function(row){		//行格式化
					//设置操作按钮
					row.btns = "<a class='xupdate' data-xv='"+row.index+"'>修改</a>&nbsp;"+
						"<a class='xdelete' data-xv='"+row.name+"'>删除</a>";
				},
				update:function(row,b){
					$.xalert({msg:"修改："+row.name});
				},
				deleteSuccess:function(d){
					if (d.code==1){
						xtable.reload();
	            		$.ok('删除成功');
	                } else {
	                	$.xalert({msg:'删除失败！'});
	                }
				},
				success:function(){
					//加载完成
				}
			});
			
			$("#btn_get_sel").click(function(){
				alert(xtable.getSelected());
			});
		})
	</script>
</head>
<body>
	<h2>表格</h2>
	<button type="button" class="xbtn" id="btn_get_sel">获取选中行</button><br/><br/>
	<div class="xtable" id="goods_xtable">
		<table class="xhead">
			<tr>
				<th class="ck"><input type="checkbox" class="xcheckbox"/></th>
				<th>商品</th>
				<th width="100px">商品类型</th>
				<th width="80px">价格 </th>
				<th width="80px">销量</th>
				<th width="100px">操作</th>
			</tr>
		</table>
		<div class="xbody">
			<table>
				<tbody class="xtemplate">
					<tr>
						<td class="ck"><input type="checkbox" data-xv="{index}"/></td>
						<td>{name}</td>
						<td>{typeName}</td>
						<td class="tr">{price}</td>
						<td class="tc">{sales}</td>
						<td class="tc">{btns}</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<!--xpaging start-->
	<div class="xpaging" id="goods_xpaging">
		<div class="xtemplate">
			<span class="total">
				<span>共{total}条，</span>
				<span>每页</span><span class="xrows">{rows}</span><span>条</span>
			</span>
			<span class="xbtn xfirst" data-xv={first} title="首页"><span><i></i></span></span>
			<span class="xbtn xprev" data-xv={prev} title="上一页"><i></i></span>
			<span class="page">{page} / {size}</span>
			<span class="xbtn xnext" data-xv={next} title="下一页"><i></i></span>
			<span class="xbtn xlast" data-xv={last} title="尾页"><span><i></i></span></span>
			<span class="go">
				<input type="text" class="input xpage" size="2" />
				<span class="xbtn xgo">跳转</span>
			</span>
		</div>
	</div>
	<!--xpaging end-->
</body>
</html>